<template>
  <div class="history">
    <h2>History views</h2>
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <history-problem-description
              @deliverProblemData="setProblemData"
              @onIntervieweeChange="onIntervieweeChange"
            ></history-problem-description>
          </el-col>
          <el-col :span="12">
            <history-code-panel ref="historyCodePanel"></history-code-panel>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import HistoryProblemDescription from "@/components/History/HistoryProblemDescription.vue";
import HistoryCodePanel from "@/components/History/HistoryCodePanel.vue";
export default {
  components: {
    HistoryProblemDescription,
    HistoryCodePanel,
  },
  name: "History",
  methods: {
    onIntervieweeChange(uid) {
      this.userId = uid;
      this.isCodePanelShow = false;
      this.$nextTick(() => {
        this.isCodePanelShow = true;
        this.$nextTick(() => {
          this.$refs["historyCodePanel"].setProblemData(this.problemData);
          this.$refs["historyCodePanel"].setUserId(this.userId);
        });
      });
    },
    setProblemData(data) {
      this.problemData = data;
      this.$refs["historyCodePanel"].setProblemData(this.problemData);
    },
  },
  data() {
    return {
      isCodePanelShow: true,
      userId: "",
      problemData: [],
    };
  },
};
</script>

<style scoped></style>
